import { Component, OnInit, AfterViewInit, Input, ViewChild, ElementRef } from "@angular/core";

import { HttpService } from "src/app/shared/service/http.service";
declare var BMap;
declare const BMapLib: any;
@Component({
  selector: "app-peripheral-info",
  templateUrl: "./peripheral-info.component.html",
  styleUrls: ["./peripheral-info.component.scss"]
})
export class PeripheralInfoComponent implements OnInit {
  @Input() tagData: any;

  @ViewChild('mapBox') mapBox: ElementRef;

  curIndex = 5;

  map: any;

  markerList = [];

  infoBoxList = [];

  point: any;

  constructor(private http: HttpService) { }
  ngOnInit() {
  }
  // tslint:disable-next-line:use-life-cycle-interface
  ngAfterViewInit() {
    const that = this;
    setTimeout(() => {
      that.initMap();
    }, 1000);
  }
  // 初始化地图
  initMap() {
    try {
      const map = this.map = new BMap.Map(this.mapBox.nativeElement, { minZoom: 18, maxZoom: 18, enableMapClick: true });
      this.mapBox.nativeElement.style.zIndex = 2;
      map.enableDragging(true);
      const point = new BMap.Point(
        this.tagData.data.shop.longitude,
        this.tagData.data.shop.latitude
      );
      map.centerAndZoom(point, 16);
      const myIcon = new BMap.Icon(
        "assets/icon/map_icon_other_normal@2x.png",
        new BMap.Size(40, 45)
      );
      const marker = new BMap.Marker(point, { icon: myIcon });
      this.markerList.push(marker);
      map.addOverlay(marker);
      // this.createInfoWindow(this.tagData.data.shop.shopName);
      this.addClickHandler(marker);
    } catch (error) {
      alert('地图加载失败 ' + JSON.stringify(error));
    }
  }
  // 切换类型
  tabChange(index) {
    try {
      this.markerList = [];
      this.infoBoxList = [];
      this.map.clearOverlays();
      const point = new BMap.Point(
        this.tagData.data.shop.longitude,
        this.tagData.data.shop.latitude
      );
      const myIcon = new BMap.Icon(
        "assets/icon/map_icon_other_normal@2x.png",
        new BMap.Size(40, 45)
      );
      const marker = new BMap.Marker(point, { icon: myIcon });
      this.markerList.push(marker);
      this.map.addOverlay(marker);
      // this.createInfoWindow(this.tagData.data.shop.shopName);
      this.addClickHandler(marker);

      this.curIndex = index;
      const params = {
        content: this.tagData.data.tabs[index].submit.content,
        id: this.tagData.data.tabs[index].submit.id,
        sessionId: localStorage.getItem("sessionId")
      };

      this.http.post("application/submit", params, res => {
        const arr = [
          "assets/icon/map_icon_other_normal copy@2x.png",
          "assets/icon/map_icon_other_normal copy 17@2x.png",
          "assets/icon/map_icon_car_normal copy 2@2x.png",
          "assets/icon/map_icon_other_normal copy 33@2x.png"
        ];

        res.data.mapData.map(v => {
          const pointI = new BMap.Point(v.longitude, v.latitude);
          const myIconI = new BMap.Icon(arr[index], new BMap.Size(40, 45));
          const markerI = new BMap.Marker(pointI, { icon: myIconI });
          this.markerList.push(markerI);
          this.map.addOverlay(markerI);
          this.addClickHandler(markerI,v.name,pointI);
          // this.createInfoWindow(v.name);
        });
      });
    } catch (error) {
      alert('ngOnInit Error ' + JSON.stringify(error));
    }

  }

  addClickHandler(marker,name?,pointI?) {
    try {
      marker.addEventListener("click", () => {
        console.log('click'); 
        for (let i = 0; i < this.markerList.length; i++) {
          if (
            marker.point === this.markerList[i].point &&
            this.point !== marker.point
          ) {
            if (i !== 0) {
              const clkArr = [
                "assets/icon/map_icon_other_normal copy 22@2x.png",
                "assets/icon/map_icon_other_normal copy 11@2x.png",
                "assets/icon/map_icon_car_normal copy 5@2x.png",
                "assets/icon/map_icon_other_normal copy 35@2x.png"
              ];
              this.markerList[i].setIcon(
                new BMap.Icon(clkArr[this.curIndex], new BMap.Size(40, 45))
              );           
            } else {
              this.markerList[i].setIcon(
                new BMap.Icon(
                  "assets/icon/map_icon_other_normal@2x.png",
                  new BMap.Size(40, 45)
                )
              );
            }
            this.createAndOpenWindwo(name,i,pointI);
          } else {
            if (i !== 0) {
              const arr = [
                "assets/icon/map_icon_other_normal copy@2x.png",
                "assets/icon/map_icon_other_normal copy 17@2x.png",
                "assets/icon/map_icon_car_normal copy 2@2x.png",
                "assets/icon/map_icon_other_normal copy 33@2x.png"
              ];
              this.markerList[i].setIcon(
                new BMap.Icon(arr[this.curIndex], new BMap.Size(40, 45))
              );
            } else {
              this.markerList[i].setIcon(
                new BMap.Icon(
                  "assets/icon/map_icon_other_normal@2x (1).png",
                  new BMap.Size(40, 45)
                )
              );
            }
            // It's nessary to use close , because it's not has latitude and longitude
            if(this.infoBoxList[i]){
              // this.infoBoxList[i].close();
              this.infoBoxList[i].close(this.markerList[i]);
            }
            // this.infoBoxList[i].close(this.markerList[i]);
          }
        }
        if (this.point === marker.point) {
          this.point = null;
        }
      });

    } catch (error) {
      alert('ngOnInit Error ' + JSON.stringify(error));
    }
  }

  createAndOpenWindwo(data,index,pointI){
    try {
      const html = [
        `<p style="
            font-size:13px;
            color:#27282E;
            padding: 0;
            text-align: center;
            height: 2rem;
            line-height: 2rem;
            ">` +
        data +
        "</p>" +
        `<img style="
          width:0.5rem;
          height:0.25rem;
          margin: 0 auto;
          position: absolute;
          left: 48%;
          "
        src="assets/icon/map_arrow_nor@2x.png" />`
      ];
      const infoBox = new BMapLib.InfoBox(this.map, html.join(""), {
        boxStyle: {
          background: "white",
          width: data.length * 13 + 20 + "px",
          height: "2rem",
          "border-radius": "1rem",
          "margin-bottom": "22px",
          "box-shadow": "0rem 0.06rem 0.31rem 0rem rgba(39,40,46,0.25)",
          opacity: 0.95
        },
        enableAutoPan: true,
        closeIconUrl: ""// http://api0.map.bdimg.com/images/iw_close1d3.gif
        // , align: INFOBOX_AT_TOP
      });
      setTimeout(() => {
        infoBox.initialize(this.map);
        infoBox.open(pointI);
        this.infoBoxList.push(infoBox);
      }, 300);
    } catch (error) {
      // alert('ngOnInit Error ' + JSON.stringify(error));
    }
  }
}
